<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="per(count)">修改</button>
        <button @click="count++">累加{{count}}</button>
        <button @click="deleteAttr">删除</button>
        <button @click="addAttr">新增</button>

        <p>姓名是: {{person.name}}</p>
        <p>年龄是: {{person.age}}</p>
        <p>性别是: {{person.sex}}</p>
        <p>爱好是: {{person.hobby}}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data() {
                return {
                    person: {
                        name: '小瘪三',
                        age: 40,
                        sex: '男'
                    },
                    count: 1
                }
            },
            methods: {
                //删除 我们需要使用Vue.delete() 或者 vm.$delete()方法删除
                // 这两个只是存放位置不同的同一个方法
                deleteAttr() {
                    Vue.delete(this.person, 'name')
                    vm.$delete(this.person, 'sex')
                },
                // 新增
                addAttr() {
                    Vue.set(this.person, 'sex', '女')
                    vm.$set(this.person, 'hobby', '游泳')
                },
                //修改姓名等其它内容,可以用事件对象及函数传参的方法
                per(a) {
                    this.person.name = a
                }
            },

        })
    </script>
</body>

</html>